selection

This is a header: select some text.

This is a paragraph: select some text.

code:

                <style>
                    .one{margin-left:1vw;}
                    ::selection {color: red; background: yellow;}
                </style>
                <div>
                    <h3 class="one">This is a header: select some text.</h3>
                    <p class="one">This is a paragraph: select some text.</p>
                    <div class="one">This is some text in a div element: select some text.</div>
                </div>
            

This text has special styles when you highlight it.

Also try selecting text in this paragraph.

code:

                <style>
                    .two, .three{margin-left: 1vw;}
                    .two::selection {color: gold; background-color: red;}
                    .three::selection {color: white; background-color: blue;}
                </style>
                <div>
                    <h3 class="two">This text has special styles when you highlight it.</h3>
                    <p class="three">Also try selecting text in this paragraph.</p>
                </div>
            

Select me to see normal behavior.

Try selecting me for a different text color.

You can select me for a different background color.

You can also select me for a different background.

Guess what… you can select me for a different background color and text color.

How about a text-shadow? Sure, select me for a different text-shadow.

What about nest elements? Select me for a different background color. And this sentence is just a color selection. Nesting works!

Textarea, too!*

code:

                <style>
                    .example-color::selection {color: #8e44ad;}
                    .example-background-color::selection {background-color: #f1c40f;}
                    .example-background::selection {background: #e74c3c;}
                    .example-both::selection {background-color: #8e44ad;  color: white;}
                    .example-shadow::selection {text-shadow: 1px 1px 0 #27ae60;}
                    .example-input::selection {background: #2ecc71;}
                    .example-textarea::selection {background: #34495e; color: white;}
                    p,input,textarea  {margin-bottom: 1vw;}
                </style>
                <div style="margin-left: 1vw;">
                    <p class="example-normal">Select me to see normal behavior.</p>
                    <p class='example-color'>Try selecting me for a different text color.</p>
                    <p class='example-background-color'>You can select me for a different 
                    background color.</p>
                    <p class='example-background'>You can also select me for a different 
                    background.</p>
                    <p class='example-both'>Guess what& hellip; you can select me for a different
                     background color and text color.</p>
                    <p class='example-shadow'>How about a text-shadow? Sure, select me for a 
                    different text-shadow.</p>
                    <p class='example-background-color'>What about nest elements? Select me for 
                    a different background color.
                    <span class='example-color'>And this sentence is just a color selection.
                    </span> Nesting works!</p>
                    <input class='example-input' type='text' value='Inputs work!*'>
                    <textarea class='example-textarea' cols='30' name='' rows='10'>Textarea, 
                    too!*</textarea>
                    <div class='foot-notes'>*not Safari</div>
                </div>
            

On selection, this text-shadow stays on.

On selection, this text-shadow is set to none.

code:

                <style>
                    .four {margin-left: 5vw;font-size: 2vw; font-weight: 900; margin-bottom: 1vw; 
                        text-shadow: 0.1vw 0.2vw 0.1vw #C79292;}
                    .four::selection {background: lightblue;}
                    .example::selection {text-shadow: none;}
                </style>
                <div>
                    <p class="four">On selection, this text-shadow stays on.</p>
                    <p class="four example">On selection, this text-shadow is set to none.</p>
                </div>